Skip to main content

Badge Multiple Variants

  • default - Uses $backgroundPress with $color text
  • primary - Uses $primary background with white text
  • secondary - Uses $secondary background with $color text
  • accent - Uses $accent background with white text
  • rating - Uses $amber4 background with white text (perfect for star ratings)

📏 Three Sizes

  • sm - Small (10px text, compact padding)
  • md - Medium (12px text, moderate padding)
  • lg - Large (14px text, generous padding)ent

A versatile badge component for displaying small pieces of information like genres, tags, or categories.

Features​

🎨 Multiple Variants

  • default - Uses $backgroundPress with $color text
  • primary - Uses $primary background with white text
  • secondary - Uses $secondary background with $color text
  • accent - Uses $accent background with white text

📏 Three Sizes

  • sm - Small (10px text, compact padding)
  • md - Medium (12px text, moderate padding)
  • lg - Large (14px text, generous padding)

Usage​

import { BadgeIcon } from "@/components/ui/BadgeIcon"

// Basic usage
<BadgeIcon>Drama</BadgeIcon>

// With variants
<BadgeIcon variant="primary">Action</BadgeIcon>
<BadgeIcon variant="accent">Thriller</BadgeIcon>
<BadgeIcon variant="rating">⭐ 8.7</BadgeIcon>

// Different sizes
<BadgeIcon size="sm">Tag</BadgeIcon>
<BadgeIcon size="md">Category</BadgeIcon>
<BadgeIcon size="lg">Genre</BadgeIcon>

// Multiple badges
<XStack style={{ gap: 4, flexWrap: "wrap" }}>
  {genres.map((genre, index) => (
    <BadgeIcon key={index} variant="default">
      {genre}
    </BadgeIcon>
  ))}
</XStack>

Props​

PropTypeDefaultDescription
childrenReact.ReactNode-Content to display inside the badge
variant"default" | "primary" | "secondary" | "accent""default"Visual style variant
size"sm" | "md" | "lg""sm"Size of the badge

Design System Integration​

  • Uses Tamagui theme tokens for all colors ($primary, $secondary, etc.)
  • Automatic dark/light mode support through theme system
  • Consistent spacing and typography with your design system
  • Easy maintenance - update colors in tamagui.config.ts and all badges update
  • Responsive and accessible design
  • Works well in flex layouts with wrapping